<template>
<div>
      <Phead />

    <div class="langgreen firstround">
        <div class="w">
            <h6 class="fabiao">发标信息</h6>
            <p>①填写招标信息②确认您的需求③坐等报价</p>
        </div>
    </div>
    <div class="w inthebidding stamp">
        <div class="clearfix">
            <div class="box-9 box" v-for=" (val,index) in addPro" v-bind:key="index">
              <span class="plus" @click="delPro(index)" v-if="index" :index="index">-</span>
                <h4>产品信息</h4>
                <form action="">
                    <table>
                        <tbody>
                            <tr>
                                <td>名称：</td>
                                <td><input data-tag="goods_name" name="goods_name" :index="index" @blur="setInputValue"  type="text"  placeholder="请输入产品名称"></td>
                            </tr>
                            <tr>
                                <td>品牌/型号：</td>
                                <td><input data-tag="goods_brand_model" name="goods_brand_model" :index="index" @blur="setInputValue"  type="text" placeholder="请填写品牌/型号">
                                </td>
                            </tr>
                            <tr>
                                <td>单位：</td>
                                <td><input data-tag="goods_unit" name="goods_unit" :index="index" @blur="setInputValue"  type="text" placeholder="请填写物品单位，如：台">
                                </td>
                            </tr>
                            <tr>
                                <td>数量：</td>
                                <td><input data-tag="goods_num" name="goods_num" :index="index" @blur="setInputValue" type="text" placeholder="请填写" >
                                </td>
                            </tr>
                            <tr>
                                <td>单价：</td>
                                <td><input data-tag="goods_price" name="goods_price" :index="index" @blur="setInputValue" type="text" placeholder="请填写物品单价"></td>
                            </tr>
                            <tr>
                                <td>产品说明：</td>
                                <td>
                                    <textarea data-tag="goods_remark" name="goods_remark" :index="index" @blur="setInputValue"  cols="30" rows="10" placeholder="请尽可能详细的填写您所招标的产品说明，方便广大供应商更加快速精准的竞标您的订单，并提供合理的报价。"></textarea>
                                    
                                    
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </form>

            </div>
            <div class="box-add box">
               <div class="add" @click="addNewPro">添加产品</div>
            </div>
            <div class="box-10 box">
                <h2>温馨提示:</h2>
                <p>您所填写的所有资料医麦网都会做加密处理，信息绝对安全，只有在交易促成的情况下我们才会根据情况逐步显示您的必要信息，请放心填写，如有疑问请咨询客服，谢谢。</p>
            </div>
            <div class="box-11 box">
                <h4>项目信息</h4>
                <form action="">
                    <table >
                        <tbody>
                            <tr>
                                <td>分类：</td>
                                <td>
                                    <select v-model="bid_type" name="" id="">
                                      <option value="0">请选择</option>
                                      <option v-for="(item,index) in column1" :key="index" :value="item.value" >{{item.text}}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>收货地址：</td>
                                <td class="there">
                                    <select v-model="province_id" @change="chosePro">
                                      <option value="0">请选择</option>

                                      <option v-for="(item,index) in provinceList" :key="index" :value="item.value" >{{item.text}}</option>
                                    </select>
                                    <span>/</span>
                                    <select v-model="city_id" @change="choseCity">
                                      <option value="0">请选择</option>
                                      
                                      <option v-for="(item,index) in cityList" :key="index" :value="item.area_id" >{{item.area_name}}</option>
                                    </select>
                                    <span>/</span>
                                    <select v-model="area_id">
                                      <option value="0">请选择</option>
                                      
                                      <option v-for="(item,index) in areaList" :key="index" :value="item.area_id" >{{item.area_name}}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>详细地址：</td>
                                <td><input :value="bid_post_addr"  data-tag="bid_post_addr" name="bid_post_addr" @blur="setVal"  type="text" placeholder="请填写详细地址">
                                </td>
                            </tr>
                            <tr>
                                <td>联系人：</td>
                                <td><input  :value="bid_contact_name" data-tag="bid_contact_name" name="bid_contact_name" @blur="setVal" type="text" placeholder="请输入联系人姓名"></td>
                            </tr>
                            <tr>
                                <td>联系电话：</td>
                                <td><input  :value="bid_contact_phone" data-tag="bid_contact_phone" name="bid_contact_phone" @blur="setVal"  type="text" placeholder="请输入联系人的电话"></td>
                            </tr>
                            <tr>
                                <td>交货时间：</td>
                                <td>
                                    <select v-model="bid_arrival_time" name="" id="">
                                      <option value="0">请选择</option>
                                      <option v-for="(item,index) in column2" :key="index" :value="item.value" >{{item.text}}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>预算：</td>
                                <td><input  :value="bid_budget" data-tag="bid_budget" name="bid_budget" @blur="setVal" type="text" placeholder="请输入您的预算"></td>
                            </tr>
                            <tr>
                                <td>付款方式：</td>
                                <td>
                                    <select v-model="bid_pay_type" name="" id="">
                                      <option value="0">请选择</option>
                                      <option v-for="(item,index) in column3" :key="index" :value="item.value" >{{item.text}}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>项目备注：</td>
                                <td>
                                    <textarea data-tag="bid_remark" name="bid_remark" @blur="setVal" cols="30" rows="10" placeholder="请尽可能详细的填写您所招标的项目备注，方便广大供应商更加快速精准的竞标您的订单，并提供合理的报价。"></textarea>
                                    
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button @click="formSubmit" type="button">提交</button>
                </form>
            </div>
        </div>

    </div>

        <Pfoot />
    <!-- 弹窗 -->
    <Pdailog :is-show="dailogShow" @on-close="closeDialog" >
         <div slot="main">{{dailogText}}</div>
    </Pdailog>
    <!-- 表单验证 -->
    <Pdailog :is-show="formAlertShow" @on-close="formAlertClose" >
         <div slot="main">{{formAlertText}}</div>
    </Pdailog>
    <!-- 确认提交 -->
    <Pdailog :is-show="fomePushShow" :is-confirm="true"  @on-close="formAlertClose" @on-confirm="confirmPush">
         <div slot="main">{{fomePushText}}</div>
    </Pdailog>

</div>


</template>

<script>
// @ is an alias to /src
import Phead from '@/components/Phead.vue'
import Pfoot from '@/components/Pfoot.vue'
import Pdailog from '@/components/Pdailog.vue'

export default {
  name: 'my',
  data(){
    return{
        addPro:[
            {
                goods_name:'',
                goods_brand_model:'',
                goods_unit:'',
                goods_num:'',
                goods_price:'',
                goods_remark:''
            },
            
        ],
        bid_name:'',//
        bid_type:0,//项目分类
        bid_post_addr:'',//详细地址 
        bid_contact_name:'', //联系人
        bid_contact_phone:0, //联系电话 
        bid_arrival_time:0,//交货时间 
        bid_budget:0,//预算 
        bid_pay_type:0, //付款方式
        bid_remark:'',//项目备注


        province_id:0,
        city_id:0,
        area_id:0,
        address_txt:'',

        column1:'',
        column2:'',
        column3:'',

        provinceList:'',
        cityList:'',
        areaList:'',

        dailogShow:false,
        dailogText:'报名成功',
        //form 错误提示
        formAlertShow:false,
        formAlertText:'提示',
        //form 提交确认
        fomePushShow:false,
        fomePushText:'提示',
        formData:{}
     }
  },
  async created(){
    let re =  await this.$axios.post('/bid/pushBidInit') 
        //如果是医院 ，且审核通过
        if(re.code == 200){
          let user = re.data;
            this.bid_post_addr = user.post_addr,
            // this.province_id = user.province_id,
            // this.city_id = user.city_id,
            // this.area_id = user.area_id,
            // this.address_txt = user.area,
            this.bid_contact_name = user.agent,
            this.bid_contact_phone = user.user_phone,

            this.column1 = user.column1,
            this.column2 = user.column2,
            this.column3 = user.column3
            this.provinceList = user.provinceList
        
        }else{
          this.dailogShow = true,
          this.dailogText = re.msg
        
           
        }
  },
  
  mounted(){
    
            
  },
  components: {
    Phead,
    Pfoot,
    Pdailog

  },
  methods:{
  //所在省市区选择
  chosePro(){
    let that = this
    let re =  this.$axios.post('/index/getListArea',{
              parent_id:this.province_id
            }).then(function(re){
                if(re.code == 200){
                    that.cityList =re.data
                }
            })

  },
  //所在省市选中
  choseCity(){
    let that = this
    let re =  this.$axios.post('/index/getListArea',{
              parent_id:this.city_id
            }).then(function(re){
                if(re.code == 200){
                    that.areaList =re.data
                }
            })
      

  },
  
  //添加商品
  addNewPro() {
    let addPro = this.addPro;
    let newArray = {
        goods_name:'',
        goods_brand_model:'',
        goods_unit:'',
        goods_num:'',
        goods_price:'',
        goods_remark:''

    }
    this.addPro = addPro.concat(newArray)
  },
  //删除
  delPro(index) {
    let arrayLength = this.addPro.length //数组长度
    let newArray = [];
    if (arrayLength > 1) {
      //数组长度>1 才能删除
      for (let i = 0; i < arrayLength; i++) {
        if (i !== index) {
            newArray.push(this.addPro[i])
        }
      }
      this.addPro =  newArray;
    }
  },
   //产品 获取输入框信息
  setInputValue(e) {
    let index = e.target.getAttribute('index') //数组下标
    let tag = e.target.getAttribute('data-tag')  //字段名称
    let array = this.addPro;
    let total = 0; //预算

   
    array[index][tag] = e.target.value  //赋值
    this.addPro = array;
    //计算预算
    for (var i = 0; i < array.length; i++) {
        total =  total+Math.floor(parseFloat(array[i]['goods_price']*100 * array[i]['goods_num']))/100;
        // total = (total+array[i]['goods_price'] * array[i]['goods_num'])*100/100
    }
    this.bid_budget = total;

   },
   //input 动态赋值
   setVal(e){
      let tag = e.target.getAttribute('data-tag')  //字段名称
      let val = e.target.value  //赋值
      this[tag] = val
   },

   async formSubmit(){
    var formData ={}
    var userInfo = this.getUserInfo();
    var arr = this.addPro;

    for (var i = 0; i < arr.length; i++) {
              if (new RegExp('^[\\S]{2,20}$').test(arr[i].goods_name) != true) {
                  this.formAlertShow =true
                  this.formAlertText ='产品名称不能为空或格式不正确'
                    
                  return
                }
                if (new RegExp('^[\\S]{2,20}$').test(arr[i].goods_brand_model) != true) {
                  this.formAlertShow =true
                  this.formAlertText ='品牌/型号不能为空或格式不正确!'
                    
                    return
                }
                if (new RegExp('^[\u4E00-\u9FA5A-Za-z]{1,10}$').test(arr[i].goods_unit) != true) {
                  this.formAlertShow =true
                  this.formAlertText ='单位不能为空或格式不正确!'
                  
                  return
                }
                if (new RegExp('^[0-9]{1,10}$').test(arr[i].goods_num) != true) {
                  this.formAlertShow =true
                  this.formAlertText ='数量不能为空或格式不正确!'
                  
                  return
                
                }
                if(arr[i].goods_price == ''){
                  this.formAlertShow =true
                  this.formAlertText ='单价不能为空!'
                       
                  return  
                }
                if (new RegExp('(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)').test(arr[i].goods_price) != true) {
                  this.formAlertShow = true
                  this.formAlertText ='单价格式不正确!请重新输入'
                     
                  return             
                }
                if (new RegExp('^[\\S]{0,200}$').test(arr[i].goods_remark) != true) {
                  this.formAlertShow =true
                  this.formAlertText ='产品说明字数过长'
                 
                  return
                 }
  
    }
   if(this.bid_type == "" || this.bid_type == 0) {
                  this.formAlertShow =true
                  this.formAlertText ='请选择项目分类!'
                  
                  return
     
   }
   
   if(this.province_id == 0 || this.city_id == 0 || this.area_id == 0) {
                  this.formAlertShow =true
                  this.formAlertText ='请选择收货地址!'
                
                return
      
   }
  if(new RegExp('^[\\S]{2,40}$').test(this.bid_post_addr) != true) {
                  this.formAlertShow =true
                  this.formAlertText ='详细地址不能为空或格式不正确!'
           
                  return
         
   }if (new RegExp('^[\u4E00-\u9FA5A-Za-z0-9]{1,20}$').test(this.bid_contact_name) != true) {
                  this.formAlertShow =true
                  this.formAlertText ='联系人不能为空或格式不正确!'
           
                  return
        
   }
   if(new RegExp('^[0-9\-]{8,20}$').test(this.bid_contact_phone) != true) {
                  this.formAlertShow =true
                  this.formAlertText ='联系电话不能为空或格式不正确!'
           
                  return 

   }
 if (this.bid_arrival_time == "" || this.bid_arrival_time == 0) {
                  this.formAlertShow =true
                  this.formAlertText ='请选择交货时间!'
           
                  return
   }
    if (RegExp('(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)').test(this.bid_budget) != true) {
                  this.formAlertShow =true
                  this.formAlertText ='预算金额不能为空或格式不正确!'
          
                  return 

   }if (this.bid_pay_type == "" || this.bid_pay_type == 0) {
                  this.formAlertShow =true
                  this.formAlertText ='请选择付款方式!'
           
                  return 
   }
   if(new RegExp('^[\\S]{0,200}$').test(this.bid_remark) != true) {
                  this.formAlertShow =true
                  this.formAlertText ='项目备注字数过长!'
           
                  return
   }


    formData['addPro'] = this.addPro; //产品
    formData['bid_type'] = this.bid_type;//项目分类
    formData['bid_post_addr'] = this.bid_post_addr;//收货地址
    formData['bid_contact_name'] = this.bid_contact_name;//联系人
    formData['bid_contact_phone'] = this.bid_contact_phone;//联系电话
    formData['bid_arrival_time'] = this.bid_arrival_time;//交货时间
    formData['bid_budget'] = this.bid_budget;//预算
    formData['bid_pay_type'] = this.bid_pay_type;//付款方式
    formData['bid_remark'] = this.bid_remark;//项目备注
    formData['province_id'] = this.province_id;
    formData['city_id'] = this.city_id;
    formData['area_id'] = this.area_id;
    // console.log(formData)
    this.formData = formData
    let that = this;
    this.fomePushShow = true
    this.fomePushText ='您发布竞价具有法律效益，请认真对待，确认发布竞价？'
     
   },
  

    gologin(){
        this.$router.push({path:'/register/login'})
    },
    //关闭弹窗
    async  closeDialog(){
        let re =  await this.$axios.post('/bid/pushBidInit') 
          //未登录
          if(re.code == 401){
               this.$router.push({path:'/register/login'})

          //用户未认证
          }else if(re.code == 211){
                this.$router.push({path:'/register/status'})


          }else{
               
               this.$router.push({path:'/'})
          }
        this.showAlert = false;
    },
    //表单错误提示弹框
    formAlertClose(){
        this.formAlertShow = false;
        this.fomePushShow = false;
    },
    //确认提交
    confirmPush(){
            let that = this
            let re =  this.$axios.post('/bid/pushBid',{
              formData:this.formData
            }).then(function(re){
                if(re.code == 200){
                   that.$router.push({path:'/'})

                    // this.is_show=false
                    // this.show_success=true
                    // this.res_bid_id=re.data.data.bid_id
                }
            })
             
     },


  }
}
</script>